/*首页样式*/
.index{
    .top{
        .arrow{
            cursor: pointer;
        }
        @media only screen and (min-width: 1440px){
            background: url(../img/bkg-img.png) #090B15 top center no-repeat;
            background-size:100% auto;
            min-width:960;
            height:100%;
            position:relative;
            .slogan{
                margin:355px auto auto 227px;
            }
            .arrow{
                position:absolute;
                left:50%;
                margin-left:-10px;
                bottom:100px;
                display:block;
                animation: movedown 2s linear infinite;
            }
        }
        @media only screen and (min-width: 960px) and (max-width: 1440px){
            background: url(../img/bkg-img.png) #090B15 top center no-repeat;
            background-size:120% auto;
            min-width:960;
            height:100%;
            position:relative;
            .slogan{
                margin:215px auto auto 127px;
            }
            .arrow{
                position:absolute;
                left:50%;
                margin-left:-10px;
                bottom:100px;
                display:block;
                animation: movedown 2s linear infinite;
            }
        }
        @media only screen and (max-width: 960px) and (min-width: 600px){
            background: url(../img/bkg-img-m.png) #090B15 center 120px no-repeat;
            background-size:100% auto;
            max-size:960px;
            height:747px;
            position:relative;
            .slogan{
                width:150px;
                height:100px;
                margin-left:-75px;
                position:absolute;
                bottom:80px;
                left:50%;
            }
            .arrow{
                position:absolute;
                left:50%;
                bottom:40px;
                margin-left:-10px;
                display:block;
                animation: movedown 2s linear infinite;
            }
        }
        @media only screen and (max-width: 600px){
            background: url(../img/bkg-img-m.png) #090B15 center 120px no-repeat;
            background-size:100% auto;
            max-size:960px;
            height:547px;
            position:relative;
            .slogan{
                width:150px;
                height:100px;
                margin-left:-75px;
                position:absolute;
                bottom:80px;
                left:50%;
            }
            .arrow{
                position:absolute;
                left:50%;
                bottom:40px;
                margin-left:-10px;
                display:block;
                animation: movedown 2s linear infinite;
            }
        }
        
        @keyframes movedown
        {
            0%   {
                transform: translate(0,0);
            }
            50%   {
                transform: translate(0,30px);
            }
            100% {
                transform: translate(0,0);
            }
        }
    }
    .middle{
        width:100%;
        height:10px;
        background:linear-gradient(left, #11ceda, #53b1f6);
        background: -webkit-linear-gradient(left, #11ceda, #53b1f6);
        background: -o-linear-gradient(left, #11ceda, #53b1f6);
        background: -ms-linear-gradient(left, #11ceda, #53b1f6);
    }
    .bottom{
        -webkit-font-smoothing: antialiased;
        .slogan{
            .animat_icon{
                width:264px;
                height:264px;
                overflow: visible;
                img{
                    width:264px;
                    height:264px;
                    position:absolute;
                    top:0;
                    left:0;
                }
                img:nth-child(1){
                    top:30px;
                }
                img:nth-child(2){
                    animation: rotate_icon 5s linear infinite,show 1s;
                }
                @keyframes show{
                    0% {
                        opacity: 0;
                    }
                    100%{
                        opacity: 1;
                    }
                }
                @keyframes rotate_icon{
                    0% {
                        transform:rotate(0deg);
                    }
                    50%{
                        transform:rotate(180deg);
                    }
                    100%{
                        transform:rotate(360deg);
                    }
                }
            }
        }
        @media only screen and (min-width: 960px){
            height:100%;
            background-color:rgba(255,255,255, 0.2);
            position:relative;
            .slogan{
                width:900px;
                height:127px;
                position:relative;
                margin:200px auto;
                background: url(../img/bg-slogan.png) center center no-repeat;
                background-size:100% 100%;
                .animat_icon{
                    z-index:9;
                    position:absolute;
                }
                .item,.font{
                    -webkit-font-smoothing: antialiased;
                    position:absolute;
                    z-index:9;
                }
                .item1{
                    left:-45px;
                    top:-70px;
                }
                .animat_icon{
                    display: none;
                }
                .animat_icon1{
                    left:-57px;
                    top:-89px;
                }
                .item2{
                    left:300px;
                    top:-70px;
                }
                .animat_icon2{
                    left:288px;
                    top:-89px;
                }
                .item3{
                    right:19px;
                    top:-70px;
                }
                .animat_icon3{
                    right:7px;
                    top:-89px;
                }
                .font{
                    font-size:20px;
                    color: #ffffff;
                }
                .font1{
                    left:-15px;
                    top:200px;
                }
                .font2{
                    left:400px;
                    top:200px;
                }
                .font3{
                    right:75px;
                    top:200px;
                }
            }
        }
        @media only screen and (max-width: 960px){
            background-color:rgba(255,255,255, 0.2);
            position:relative;
            .slogan {
                display:block;
                margin:20px auto 0 auto;
                padding-bottom:60px;
                text-align:center;
                .item {
                    display:none;
                }
                .animat_icon{
                    display: block;
                    position:relative;
                    margin:0 auto;
                    z-index:9;
                }
                .font {
                    font-size:20px;
                    color:#ffffff!important;
                    display:block;
                    margin-bottom: 90px;
                }
            }
        }
    }
}